<!--面包屑-->
<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item, index) in lists" :key="item.path">
      <!-- {{ item.meta.title }} -->
      <router-link :to="item.path" class="link" active-class="active"
        ><span class="wenzi">{{ item.meta.title }}</span></router-link
      >
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: "Breadcrumb",
  data() {
    return {
      lists: [], //定义一个数组 用于接收路由信息
    };
  },
  created() {
    // console.log(this.$route.matched);
    this.lists = this.$route.matched; //获取路由内的全部信息
  },
  //这里必须使用监听，否则无法实时获取路由变动信息。
  // 监听后路由会实时变动，不然需要手动刷新路径才会改变
  watch: {
    $route(to, from) {
      // console.log(to);
      this.lists = to.matched;
    },
  },
};
</script>
<style lang="scss">
.link {
  color: aqua;
}
.link:hover {
  color: red;
}
.wenzi {
  color: #000;
  // font-weight: 700;
  font-weight: 400 !important;
  font-size: 15px;
}
.wenzi:hover {
  color: #2aaaff;
}
// .el-breadcrumb ::v-deep .el-breadcrumb__inner {
//   color: red !important;
// }
/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #d9bb95 !important;
  font-weight: 400 !important;
}
/* 被选中时的颜色 */
.el-breadcrumb__item:last-child ::v-deep .el-breadcrumb__inner {
  color: #fc9105 !important;
  font-weight: 800 !important;
}
</style>
